import React, { Component } from "react";
import { connect } from "react-redux";
import { addNum, subNum } from "@/store/action";
class Counter extends Component {
  render () {
    const { count, addNum, subNum } = this.props
    return (
      <div className="counter">
        <div className="header">
          <h1>counter</h1>
        </div>
        <div>当前数量:{count}</div>
        {/* 注意这里有两种调用的方法，如果需要传参，就使用箭头函数加小括号传参
        如果不需要传参，就可以直接使用这种简单的写法，直接调用函数就可以 */}
        <button onClick={() => addNum(10)}>加10</button>
        <button onClick={subNum}>减5</button>
      </div>
    );
  }
}

const mapStateToProps = function (state) {
  console.log('观测一下', state);
  return {
    count: state.count.count,
    // count: state.count,
  };
};
const mapDispatchToProps = function (dispatch) {
  return {
    addNum (num) {
      dispatch(addNum(num));
    },
    subNum () {
      dispatch(subNum(5));
    },
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(Counter);
